<template>
	<view>
		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>
		<!-- 轮播图  -->
		<view>
			<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750"
				:height="330"></gui-swiper>
		</view>
		<!-- 商品标题 分享按钮 -->
		<view class="gui-padding gui-margin-top gui-flex gui-rows gui-space-between gui-align-items-center">
			<text class="gui-h5 gui-block-text product-name gui-block-text">{{product.name}}</text>
			<view class="product-share" @tap="share">
				<text class="product-share gui-icons gui-color-orange">&#xe60c;</text>
			</view>
			
			<view class="product-share" @tap="map_nav">
				<text class="product-share gui-icons gui-color-orange">&#xe639;</text>
			</view>
		</view>

		<!-- <view class="gui-padding gui-margin-top gui-flex gui-rows gui-space-between gui-align-items-center">
			<gui-star activecolor="#FF0036" :totalstars="5" :starnum="5" :cantap="false"></gui-star>
		</view> -->

		<view class="gui-padding gui-margin-top gui-flex gui-rows gui-space-between gui-align-items-center">
			<text class="gui-h5 gui-block-text product-name gui-block-text">营业时间：{{product.time}}</text>
		</view>

		<!-- <view class="gui-padding gui-margin-top gui-flex gui-rows gui-space-between gui-align-items-center gui-flex" @tap="map_nav()">
			<text class="gui-grids-icon gui-icons gui-h5 gui-color-blue"
				style="text-align: left;width: 5%;">&#xe63f;</text>
			<text class="gui-grids-icon gui-icons gui-h5 gui-color-blue"
				style="text-align: left;margin-left: 2%;">{{product.address}}</text>
		</view> -->

		<view style="margin-left: 40rpx;" class="gui-padding-x gui-bold gui-color-black gui-margin-top-large">
			<text class="gui-h6 gui-color-gray">团购</text>
			<text class="gui-h6 gui-color-gray" style="margin-left: 480rpx;" v-if="product_list.length>0">查看更多 </text>
		</view>
		
		
		<view class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow" v-for="(item,index) in product_list" :key="index">
			<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
				<image mode="aspectFill"
					:src="item.img_url"
					class="gui-card-img"></image>
				<view class="gui-card-desc">
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<text class="gui-card-name gui-primary-text">{{item.title}}</text>
						<!-- <text class="gui-text-small gui-primary-color">补充信息</text> -->
					</view>

					<text class="gui-card-text gui-block gui-secondary-text" style="margin-top:10rpx;">{{item.tag}}</text>
					<text class="gui-card-text gui-block gui-third-text gui-color-red">￥{{item.money}}</text>
				</view>
			</view>
			<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center" @tap="buynow(item.id,item.money)">
				<text class="gui-icons gui-color-orange gui-card-footer-item gui-border-r gui-bold">&#xe612; 抢购</text>
			</view>
		</view>

		<view style="margin-top:66rpx;margin-left: 40rpx;" class="gui-padding-x  gui-color-black">
			<text class="gui-h6 gui-color-gray gui-bold">教练</text>
			<text class="gui-h6 gui-color-gray" style="margin-left: 480rpx;">查看更多 </text>
		</view>

		<view class="gui-margin-top gui-flex gui-row gui-nowrap">
			<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top" style="display: flex;">

				
				<gui-image :src="item.avatar_pic" mode="widthFix" :height="200" :width="200"
					style="padding-left: 10rpx;" v-for="(item,index) in coach_list" :key="index" @tap="teacher_details(item.teacher_id)"></gui-image>
				<!-- <gui-image :src="imgUrl" mode="widthFix" :height="200" :width="200"
					style="padding-left: 20rpx;"></gui-image>
				<gui-image :src="imgUrl" mode="widthFix" :height="200" :width="200"
					style="padding-left: 20rpx;"></gui-image> -->
				<!-- <gui-image :src="imgUrl" mode="widthFix" :height="200" :width="200" style="padding-left: 20rpx;"></gui-image> -->
			</view>
		</view>



		<view style="margin-top:66rpx;margin-left: 40rpx;" class="gui-padding-x  gui-color-black">
			<text class="gui-h6 gui-color-gray gui-bold">评价详情</text>
			<text class="gui-h6 gui-color-gray" style="margin-left: 420rpx;">{{comment_num}}人评价 </text>
		</view>

		<view class="gui-comments" style="width: 95%;">
			<view class="gui-comments-items gui-flex gui-rows gui-nowrap gui-space-between"
				v-for="(item, index) in commentContents" :key="index">
				<image :src="item.avatar_pic" class="gui-comments-face" style="margin-left: 40rpx;"></image>
				<view class="gui-comments-body" >
					<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-comments-header-text gui-text gui-primary-color">{{item.nickname}}</text>
						<!-- <text class="gui-comments-header-text gui-icons gui-color-gray gui-text-small"
							:class="[item.isPraise ? 'gui-color-blue' : '']">&#xe6ea; {{item.praise}}</text> -->
					</view>
					<text class="gui-comments-content gui-block-text">{{item.content}}</text>
					<view class="gui-comments-imgs gui-flex gui-rows gui-wrap" v-if="item.imgs">
						<view class="gui-comments-image" v-for="(img, indexImg) in item.imgs" :key="indexImg"
							@click.stop="showImgs(index, indexImg)">
							<gui-image :src="img" :width="180"></gui-image>
						</view>
					</view>
					<view v-if="item.Reply">
						<text v-for="(itemRe, indexRe) in item.Reply" :key="indexRe"
							class="gui-comments-replay gui-block-text gui-bg-gray">{{itemRe.name}} :
							{{itemRe.content}}</text>
					</view>
					<view
						class="gui-comments-info gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<!-- <text class="gui-comments-replay-btn gui-block-text gui-bg-gray">回复</text> -->
						<text class="gui-comments-info-text">{{item.add_time}}</text>
					</view>
				</view>
			</view>
		</view>



		<!-- 底部占位 -->
		<view style="height:120rpx;"></view>
	</view>
</template>
<script>
	var face =
		"https://images.unsplash.com/photo-1663717249250-804cb861ed74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5M3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80";
	var img =
		"https://images.unsplash.com/photo-1657310217094-2214abf4fd88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxNTN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60";
	export default {
		data() {
			return {
				id:0,
				product_list:[],
				phone_number:'',
				longitude:'',
				latitude:'',
				commentContents: [],
				comment_num:0,
				imgUrl: "",
				// 轮播图 
				swiperItems: [],
				// 切换导航
				navItems: [{
					id: 0,
					name: '商品详情'
				}, {
					id: 1,
					name: '相关评论'
				}],
				// 切换索引
				active: 0,
				// 属性选择
				attrShow: false,
				colors: [{
						id: 1,
						text: "红色",
						checked: false
					},
					{
						id: 2,
						text: "黑色",
						checked: false
					},
					{
						id: 3,
						text: "蓝色",
						checked: false
					}
				],
				sizes: [{
						id: 1,
						text: "10 cm",
						checked: false
					},
					{
						id: 2,
						text: "20 cm",
						checked: false
					},
					{
						id: 3,
						text: "40 cm",
						checked: false
					}
				],
				// 属性记录
				attrRes: {
					color: null,
					size: null,
					number: 1
				},
				// 商品信息
				product: {
					name:'',
					time:'',
					address:''
				},
				artciles: [],
				coach_list:[]
			}
		},
		onLoad:function(query){
			this.$globalMethod();
			if(typeof query.id !='undefined'){
				this.id = query.id;
				this.shop_details(this.id);
			}
		},
		methods: {
			buynow(id,money){
				let _this = this;
					
				_this.graceJS.post(_this.serverUrl + '/api.goods/buy', {
					goods_id: id,
					shop_id: _this.id,
					money:money
				}, 'json', {
					token: _this.token
				}, (res) => {
					if(res.code==0){
						var data = res.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timestamp,
							nonceStr: data.nonce_str,
							package: 'prepay_id='+data.prepay_id,
							signType: 'MD5',
							paySign: data.pay_sign,
							success: function(res) {
								
								
								
								uni.requestSubscribeMessage({
									tmplIds:['VuZBskoDR0Mwr_9yQvAeoVVK1gHjwaVLrnUe_N0hdv8'],
									success(res){
										// console.log(res);
									}
								});	
								
								uni.reLaunch({
									url:'/pages/order/list',
									success:function(){
										uni.showToast({
											title:'支付成功',
											icon:'none'
										})
									}
								})
								
								
								
							},
							fail: function(err) {
								if(err.errMsg=='requestPayment:fail cancel'){
									uni.showToast({
										title: '用户取消支付',
										icon: 'none'
									});
								}else{
									uni.showToast({
										title: '用户支付失败',
										icon: 'none'
									});
								}
								
								return false;
							}
						});
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}, (e) => {
					uni.showToast({
						title:'网络请求失败，请稍后再试',
						icon:'none'
					})
				})
			},
			teacher_details(id){
				uni.navigateTo({
					url:'/pages/coach/details?id='+id
				})
			},
			shop_details(id){
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.shop/shop_details', //仅为示例，并非真实接口地址。
					data: {
						"id": id
					},
					header: {
						token: _this.token
					},
				
					success: (res) => {
				
						_this.$refs.guipageloading.close();
			
						var return_data = res.data;
						if (return_data.code == 0) {
							_this.product.name = return_data.data.shop_info.name;
							_this.product.time = return_data.data.shop_info.business_hours;
							_this.product.address = return_data.data.shop_info.address;
							_this.swiperItems = return_data.data.shop_photos;
							_this.phone_number = return_data.data.shop_info.phone_number;
							_this.longitude = return_data.data.shop_info.longitude;
							_this.latitude = return_data.data.shop_info.latitude;
							_this.product_list = return_data.data.goods_list;
							_this.coach_list = return_data.data.coach_list;
							_this.commentContents = return_data.data.comment_list;
							_this.comment_num = return_data.data.comment_num;
						}
					}
				});
			},
			map_nav(){
				let _this = this;
				uni.chooseLocation({
					longitude:_this.longitude,
					latitude:_this.latitude,
					success: function (res) {
						console.log('success');
					}
				});
			},
			showImgs: function(commentsIndex, imgIndex) {
				console.log(commentsIndex, imgIndex);
				uni.previewImage({
					urls: this.commentContents[commentsIndex].imgs,
					current: this.commentContents[commentsIndex].imgs[imgIndex]
				})
			},
			// 新闻点击
			newstap: function(e) {
				// 获取新闻 id
				var newsId = e;
				console.log(newsId);
				// 打开新闻详情页面
				//uni.navigateTo()
			},
			// 分享
			share: function() {
				let _this = this;
				_this.callMobile(_this.phone_number);
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
			},
			// 返回首页
			goHome: function() {
				uni.switchTab({
					url: "首页路径"
				});
			},
			// 返回首页
			kf: function() {
				uni.showToast({
					title: '请自行完善分享代码',
					icon: "none"
				});
			},
			// 加入购物车
			addtocard: function() {
				// 选择属性
				this.selectAttr();
			},
			
			// 属性选择
			selectAttr: function() {
				// 未选择属性弹出选择
				if (!this.attrShow) {
					this.attrShow = true;
					return;
				}
				// 已选择属性进行订单提交
				// 属性在 attrRes 变量内保存
				if (this.attrRes.color == null || this.attrRes.size == null) {
					uni.showToast({
						icon: "none",
						title: "请选择属性"
					});
				}
				console.log('请完善提交代码');
			},
			colorChange: function(e) {
				this.attrRes.color = e.text;
			},
			sizeChange: function(e) {
				this.attrRes.size = e.text;
			},
			numberChange: function(e) {
				this.attrRes.number = e[0];
			},
			closeAttr: function() {
				this.attrShow = false;
			}
		}
	}
</script>
<style scoped>
	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 700rpx;
		margin: 25rpx;
		height: 580rpx;
	}

	/* 卡片视图 */
	.gui-card-view {
		padding: 25rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	.grid4 {
		width: 172rpx;
	}



	/* 您可以在页面的 style 内直接复写样式达到修改的目的 */

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */


	.gui-comments-items {
		margin-top: 35rpx;
	}

	.gui-comments-face {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		margin-right: 25rpx;
	}

	.gui-comments-body {
		width: 580rpx;
		overflow: hidden;
	}

	.gui-comments-header-text {
		line-height: 40rpx;
	}

	.gui-comments-info {
		margin-top: 2px;
	}

	.gui-comments-info-text {
		font-size: 22rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.gui-comments-content {
		line-height: 36rpx;
		font-size: 26rpx;
		padding: 8rpx 0;
	}

	.gui-comments-replay {
		font-size: 24rpx;
		color: #666666;
		border-radius: 3px;
		margin: 3px 0;
		padding: 15rpx;
		line-height: 36rpx;
	}

	.gui-comments-replay-btn {
		font-size: 20rpx;
		line-height: 44rpx;
		padding: 0rpx 20rpx;
		border-radius: 44rpx;
	}

	.gui-comments-imgs {
		margin: 8rpx 0;
	}

	.gui-comments-image {
		width: 180rpx;
		height: 128rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		font-size: 0;
		overflow: hidden;
	}
	
	
</style>